<template>
  <view class="container">
    <!-- 背景装饰 -->
    <view class="bg-decoration"></view>
    
    <!-- 页面内容 -->
    <view class="content">
      <!-- Logo -->
      <view class="logo-container">
        <view class="logo">业务宝</view>
      </view>
      
      <!-- 表单卡片 -->
      <view class="form-card">
        <!-- 选项卡切换 -->
        <view class="tabs">
          <view 
            class="tab-item" 
            :class="{ active: currentTab === 'login' }"
            @click="currentTab = 'login'"
          >
            登录
          </view>
          <view 
            class="tab-item" 
            :class="{ active: currentTab === 'register' }"
            @click="currentTab = 'register'"
          >
            注册
          </view>
        </view>
        
        <!-- 表单内容 -->
        <view class="form-content">
          <!-- 登录表单 -->
          <view v-if="currentTab === 'login'" class="form">
            <view class="input-group">
              <view class="input-icon">
                <uni-icons type="person" size="18" color="#666"></uni-icons>
              </view>
              <input 
                type="text" 
                placeholder="请输入用户名" 
                v-model="loginForm.username"
                class="input-field"
              >
            </view>
            
            <view class="input-group">
              <view class="input-icon">
                <uni-icons type="eye" size="18" color="#666"></uni-icons>
              </view>
			  <u-input :type="!showEyes1?'password':'text'" placeholder="请输入密码" 
				   v-model="loginForm.password"
				border="none"
				   class="input-field">
				<template slot="suffix">
					  <view @click.stop="showEyes1 = !showEyes1" class="eye-icon">
							<u-icon 
								:name="showEyes1 ? 'eye' : 'eye-off'" 
								size="36"
								color="#606266"
							></u-icon>
						</view>
				</template>
				</u-input>
            </view>
            
            <button class="submit-btn" @click="handleLogin">登录</button>
          </view>
          
          <!-- 注册表单 -->
          <view v-else class="form">
            <view class="input-group">
              <view class="input-icon">
                <uni-icons type="person" size="18" color="#666"></uni-icons>
              </view>
              <input 
                type="text" 
                placeholder="请输入用户名" 
                v-model="registerForm.login_name"
                class="input-field"
              >
            </view>
			<view class="input-group">
			  <view class="input-icon">
			    <uni-icons type="person" size="18" color="#666"></uni-icons>
			  </view>
			  <input 
			    type="text" 
			    placeholder="请输入姓名" 
			    v-model="registerForm.username"
			    class="input-field"
			  >
			</view>
            
            <view class="input-group">
              <view class="input-icon">
                <uni-icons type="phone" size="18" color="#666"></uni-icons>
              </view>
              <input 
                type="tel" 
                placeholder="请输入手机号" 
                v-model="registerForm.phone"
                class="input-field"
              >
            </view>
            
            <!-- 城市选择 -->
            <view class="input-group city-picker">
              <view class="input-icon">
                <uni-icons type="location" size="18" color="#666"></uni-icons>
              </view>
              <view class="picker-container" @click="showCityPicker">
				  <picker mode="selector" :range="cities" :value="cityIndex" @change="onCityChange">
				    <view class="picker-column">{{ cities[cityIndex] || '请选择城市' }}</view>
				  </picker>
				
                <text class="picker-text">{{selectedCity.name }}</text>
                <uni-icons type="arrowright" size="18" color="#ccc"></uni-icons>
              </view>
            </view>
            
            <view class="input-group">
              <view class="input-icon">
                <uni-icons type="eye" size="18" color="#666"></uni-icons>
              </view>
              
			  <u-input :type="!showEye?'password':'text'" placeholder="请输入密码" 
                v-model="registerForm.password"
				border="none"
                class="input-field">
				<template slot="suffix">
					  <view @click.stop="showEye = !showEye" class="eye-icon">
							<u-icon 
								:name="showEye ? 'eye' : 'eye-off'" 
								size="36"
								color="#606266"
							></u-icon>
						</view>
				</template>
				</u-input>
            </view>
            
            <view class="input-group">
              <view class="input-icon">
                <uni-icons type="eye" size="18" color="#666"></uni-icons>
              </view>
              
			  <u-input :type="!showEyes?'password':'text'" placeholder="请输入密码" 
				  v-model="registerForm.confirmPassword"
				border="none"
				  class="input-field">
				<template slot="suffix">
					  <view @click.stop="showEyes = !showEyes" class="eye-icon">
							<u-icon 
								:name="showEyes ? 'eye' : 'eye-off'" 
								size="36"
								color="#606266"
							></u-icon>
						</view>
				</template>
				</u-input>
            </view>
            
            <button class="submit-btn" @click="handleRegister">注册</button>
          </view>
        </view>
      </view>
      
      <!-- 其他登录方式 -->
      <view class="other-login">
        
      </view>
    </view>
    
    <!-- 城市选择弹窗 -->

	
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'login',
      loginForm: {
        username: '',
        password: '',
        remember: false
      },
	  showEye:false,
	  showEyes:false,
	  showEyes1:false,
      registerForm: {
        username: '',
        phone: '',
		login_name:'',
        password: '',
        confirmPassword: '',
        code: '',
        agreement: false,
        city_id: '',
        city_name: ''
      },
      countdown: '',
      timer: null,
      cityPickerVisible: false,
      cities: [], // 城市数据
      cityIndex: 0,
      selectedCity: { },
	  list:[]
    }
  },
  onLoad() {

	this.getCity()
  },

  methods: {
	async getCity(){
		const res = await this.$api.get('/City/index','',true)
		if(res.data.code === 200) {
			res.data.data.forEach(item => {
				this.cities.push(item.city_name)
			})
			this.list = res.data.data
		}
		
	},
	   // 获取城市名称（用于选择器显示）
	
    
    // 显示城市选择弹窗
    showCityPicker() {
      this.cityPickerVisible = true;
    },
    
    // 城市选择变化
    onCityChange(e) {
      const index = e.detail.value;
      this.cityIndex = index;
      this.selectedCity = this.cities[index];
	  this.registerForm.city_id = this.list[index].city_id
	  console.log('新大大',this.registerForm.city_id)
    },
    

    // 登录处理
    async handleLogin() {
      // 表单验证
      if (!this.loginForm.username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        })
        return
      }
      
      if (!this.loginForm.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }
	  const params = {
		  login_name:this.loginForm.username,
		  password:this.loginForm.password
	  }
      const res = await this.$api.post('/auth/login',params,true)
	  console.log(res,'ssssss')
	  if(res.data.code === 200) {
		  uni.setStorageSync('token',res.data.data.token)
		  uni.reLaunch({
		  	url:'/pages/index/index'
		  })
	  }
    },
    
    // 注册处理
    async handleRegister() {
      // 表单验证
	  if (!this.registerForm.login_name) {
	    uni.showToast({
	      title: '请输入用户名',
	      icon: 'none'
	    })
	    return
	  }
      if (!this.registerForm.username) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return
      }
      
      if (!this.registerForm.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      
      // 简单的手机号格式验证
      const phoneReg = /^1[3-9]\d{9}$/
      if (!phoneReg.test(this.registerForm.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      // 城市选择验证
      if (this.registerForm.city_id === '') {
        uni.showToast({
          title: '请选择所在城市',
          icon: 'none'
        })
        return
      }
      
      if (!this.registerForm.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }
      
      if (this.registerForm.password.length < 6) {
        uni.showToast({
          title: '密码长度不能少于6位',
          icon: 'none'
        })
        return
      }
      
      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        })
        return
      }
      
	  const params = {
		  login_name:this.registerForm.login_name,
		  user_name:this.registerForm.username,
		  phonenumber:this.registerForm.phone,
		  password:this.registerForm.password,
		  user_type:'01',
		  city_id: this.registerForm.city_id,
		  city_name: this.registerForm.city_name
	  }
      const res = await this.$api.post('/auth/register',params,true)
	  if(res.data.code == 200) {
		  this.currentTab = 'login'
		  uni.showToast({
		  	icon:'none',
			title:res.data.msg
		  })
	  }
    },
    
    // 获取验证码
    getVerificationCode() {
      // 验证手机号
      if (!this.registerForm.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      
      const phoneReg = /^1[3-9]\d{9}$/
      if (!phoneReg.test(this.registerForm.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      // 防止重复点击
      if (this.countdown > 0) return
      
      // 开始倒计时
      this.countdown = 60
      this.timer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(this.timer)
        }
      }, 1000)
      
      // 模拟发送验证码
      uni.showToast({
        title: '验证码已发送',
        icon: 'none'
      })
    },
    
    // 第三方登录
    socialLogin(type) {
      uni.showLoading({
        title: `正在使用${type === 'weixin' ? '微信' : type === 'qq' ? 'QQ' : '微博'}登录...`
      })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: `${type === 'weixin' ? '微信' : type === 'qq' ? 'QQ' : '微博'}登录成功`,
          icon: 'success'
        })
        
        // 登录成功后跳转
        uni.switchTab({
          url: '/pages/index/index'
        })
      }, 1500)
    }
  },
  
  // 组件销毁时清除定时器
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f5f7fa;
  overflow: hidden;
}

.bg-decoration {
  position: absolute;
  top: -100rpx;
  right: -100rpx;
  width: 400rpx;
  height: 400rpx;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 50%;
  filter: blur(60rpx);
  opacity: 0.3;
  z-index: 0;
}

.content {
  position: relative;
  z-index: 1;
  padding: 80rpx 40rpx;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.logo-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 80rpx;
}

.logo {
  font-size: 60rpx;
  font-weight: bold;
  color: #3b82f6;
  text-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.2);
}

.form-card {
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  padding: 40rpx;
  transition: all 0.3s ease;
}

.tabs {
  display: flex;
  margin-bottom: 40rpx;
  border-bottom: 2rpx solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 32rpx;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  
  &.active {
    color: #3b82f6;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -2rpx;
      left: 0;
      width: 100%;
      height: 4rpx;
      background-color: #3b82f6;
      border-radius: 2rpx;
    }
  }
}

.form {
  width: 100%;
}

.input-group {
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #eee;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
  transition: all 0.3s ease;
  
  &:focus-within {
    border-bottom-color: #3b82f6;
  }
  
  &.city-picker {
    border-bottom-color: #eee;
    justify-content: space-between;
    
    .picker-container {
      display: flex;
      align-items: center;
      width: 100%;
      
      .picker-text {
        flex: 1;
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}

.input-icon {
  width: 60rpx;
  text-align: center;
  margin-right: 20rpx;
  color: #999;
}

.input-field {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  padding: 10rpx 0;
  
  &::placeholder {
    color: #ccc;
  }
}

.verification-code {
  flex: 1;
  margin-right: 20rpx;
}

.get-code-btn {
  background-color: #f5f7fa;
  color: #3b82f6;
  border-radius: 10rpx;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  white-space: nowrap;
  transition: all 0.3s ease;
  
  &[disabled] {
    color: #999;
    background-color: #f0f0f0;
  }
}

.remember-me {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20rpx 0;
  font-size: 26rpx;
  color: #666;
}

.remember-text {
  margin-left: 10rpx;
}

.forgot-password {
  color: #3b82f6;
  text-decoration: none;
}

.agreement {
  display: flex;
  align-items: center;
  margin: 20rpx 0;
  font-size: 24rpx;
  color: #666;
}

.agreement-text {
  margin-left: 10rpx;
}

.submit-btn {
  width: 100%;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  color: #fff;
  border-radius: 10rpx;
  font-size: 32rpx;
  font-weight: 500;
  margin-top: 20rpx;
  transition: all 0.3s ease;
  box-shadow: 0 10rpx 20rpx rgba(59, 130, 246, 0.2);
  
  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 12rpx 24rpx rgba(59, 130, 246, 0.3);
  }
}

.other-login {
  width: 100%;
  margin-top: 60rpx;
  text-align: center;
}

.divider-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #999;
  margin-bottom: 40rpx;
  
  &::before,
  &::after {
    content: '';
    width: 100rpx;
    height: 2rpx;
    background-color: #eee;
    margin: 0 20rpx;
  }
}

.social-icons {
  display: flex;
  justify-content: center;
}

.social-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
  margin: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.1);
  }
}

/* 城市选择弹窗样式 */
.city-picker-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
}

.popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: relative;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #eee;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  font-size: 36rpx;
  color: #999;
}

.picker-wrapper {
  display: flex;
  justify-content: center;
  padding: 30rpx;
}

.picker-column {
  width: 100%;
  text-align: center;
  font-size: 30rpx;
  line-height: 60rpx;
  height: 60rpx;
  overflow: hidden;
  color:#666;
  // white-space: nowrap;
  // text-overflow: ellipsis;
}

.popup-footer {
  padding: 20rpx 40rpx;
  border-top: 2rpx solid #eee;
  display: flex;
  justify-content: flex-end;
}

.confirm-btn {
  background-color: #3b82f6;
  color: #fff;
  border-radius: 10rpx;
  padding: 16rpx 40rpx;
  font-size: 28rpx;
  transition: all 0.3s ease;
}
</style>